<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" >
<head>
    <style>
        .flex-container {
            display: flex;
            justify-content: space-between; /* 水平间隔 */
        }
        .flex-item {
            margin: 5px; /* 设置元素之间的间隔为5px */
        }

        table {
            border-collapse: separate;
            border-spacing: 0; /* 移除表格单元格之间的默认间隔 */
        }
        td {
            padding: 5px; /* 设置单元格内间隔 */
            border: 1px solid black; /* 为单元格添加边框，以便看到内间隔效果 */
        }
    </style>
    <meta charset="UTF-8">
    <title>技师列表页面</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <div class="row">
        <table class="table table-hover">
            <thead>
            <div class="flex-container">
                <tr class="success">
                    <th>项目名称</th>
                    <th>项目图片</th>
                    <th>支付金额</th>
                    <th>打赏金额</th>
                    <th>打车费</th>
                    <th>下单人名称</th>
                    <th>下单人手机号</th>
                    <th>预约时间</th>
                    <th>服务地址</th>
                    <th>订单备注</th>
                    <th>下单时间</th>
                    <th>操作</th>
                </tr>
            </div>
            </thead>
            <li>数据显示</li>
            <table class="table" th:each="order : ${page.list}">
                <td th:text="${order.projectName}"></td>
                <td th:text="${order.projectimage}"></td>
                <td th:text="${order.payPrice}"></td>
                <td th:text="${order.rewardPrice}"></td>
                <td th:text="${order.taxiPrice}"></td>
                <td th:text="${order.username}"></td>
                <td th:text="${order.phone}"></td>
                <td colspan="7" style="background:#F7F7F7">
                    <span style="color:#AAAAAA">[[${#dates.format(order.appointmentTime, 'yyyy-MM-dd HH:mm:ss')}]]</span>
                    <i class="table_i5 isShow"></i>
                </td>
                <td th:text="${order.address}"></td>
                <td th:text="${order.remarks}"></td>
                <td colspan="7" style="background:#F7F7F7">
                    <span style="color:#AAAAAA">[[${#dates.format(order.appointmentTime, 'yyyy-MM-dd HH:mm:ss')}]]</span>
                    <i class="table_i5 isShow"></i>
                </td>
                <td th:text="${order.aggregate}"></td>
            </table>
        </table>
    </div>

    <div class="order_btm">
        <div>
            <button class="btn_page" th:if="${page.currPage > 1}" th:attr="pageNum=${page.currPage - 1}">上一页</button>
            第<span th:text="${page.currPage}"> 1 </span>页
            <button class="btn_page" th:if="${page.currPage < page.totalPage}" th:attr="pageNum=${page.currPage + 1}">下一页</button>
        </div>
    </div>

    <div style="clear:both;"></div>
</head>
<body>
<script>
    $('.btn_page').click(function (){
        var pageNum = $(this).attr("pageNum")
        location.href = "http://footbathdoor.com/center/orderIndex.html?pageNum=" + pageNum;
        return false;
    })
</script>
</body>